<template>
  <div>
    <el-table
      ref="multipleTableRef"
      empty-text="抱歉，没有找到数据"
      :data="props.dataList"
      style="width: 100%"
      height="450"
      size="small"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号" width="60" property="id" fixed />
      <el-table-column label="标题" width="120" show-overflow-tooltip>
        <template #default="scope">
          <div>{{ titleUtil.title(scope.row.title) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="首图" width="120">
        <template #default="scope">
          <el-image
            style="width: 80px; height: 40px"
            :src="scope.row.firstPicture"
            :zoom-rate="1.2"
            :initial-index="4"
            fit="cover"
            z-index="100"
          >
            <template #error>
              <div class="image-slot">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template #default="scope">{{
          titleUtil.formatDateToYYYYMMDD(scope.row.createTime)
        }}</template>
      </el-table-column>
      <el-table-column property="typeName" label="分类" width="100" />
      <el-table-column property="author" label="作者" width="100" />
      <el-table-column label="类型" show-overflow-tooltip width="100">
        <template #default="scope">
          <div>
            <el-tag size="small" :type="contenModel(scope.row.model)">{{
              titleUtil.model(scope.row.model)
            }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-text :type="statusType(scope.row.status)" size="small">{{
            statusName(scope.row.status)
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280" fixed="right">
        <template #default="scope">
          <el-button type="default" size="small" @click="toDetail(scope.row)">详情</el-button>
          <el-button
            type="success"
            size="small"
            :loading="loading"
            v-if="props.type === 1 || props.type === 2"
            @click="pass(scope.row, 1)"
            >通过</el-button
          >
          <el-button
            type="danger"
            size="small"
            v-if="props.type === 1 || props.type === 2"
            @click="noPass(scope.row, 2)"
            >不通过</el-button
          >
          <el-button
            type="primary"
            size="small"
            v-if="props.type === 1 || props.type === 3"
            @click="pass(scope.row, 3)"
            >重审</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <ContentDetail ref="contentDetail"></ContentDetail>
  <DialogExamine ref="dialogExamine"></DialogExamine>
</template>

<script setup>
import { ElMessage, ElTable, ElMessageBox, ElNotification } from 'element-plus'
import titleUtil from '../util/titleUtil'
import { inject, ref } from 'vue'
import ContentDetail from './ContentDetail.vue'
import DialogExamine from './DialogExamine.vue'
import request from '@/util/request'

const props = defineProps({
  dataList: {
    type: Array,
    default: null
  },
  type: {
    type: Number,
    default: 1
  }
})

const contentDetail = ref()
const dialogExamine = ref()

const emit = defineEmits(['refresh'])

const loading = ref(false)

const { updateData } = inject('reload')
const { reflush } = inject('reflush', () => {})

const contenModel = (val) => {
  if (val === 0) {
    return 'error'
  } else if (val === 1) {
    return 'primary'
  } else if (val === 2) {
    return 'warning'
  }
}

const statusType = (id) => {
  if (id === 1) {
    return 'success'
  } else if (id === 3) {
    return 'danger'
  }
}

const statusName = (id) => {
  if (id === 1) {
    return '未审核'
  } else if (id === 3) {
    return '未通过'
  }
}

const toDetail = (item) => {
  contentDetail.value.open(item)
}

const noPass = (item) => {
  if (item.status === 3) {
    ElMessage.warning('抱歉，该文章已审核')
    return
  }
  dialogExamine.value.open(item, 2)
}

const pass = (item, val) => {
  console.log('通过', item, val)
  if (item.status === 3 && val === 1) {
    ElMessage.warning('抱歉，当前文章已审核')
    return
  }
  
  const formPass = {
    id: val,
    contentId: item.id,
    userId: item.userId,
    contentTypeId: item.typeId,
    msg: '通过了',
    status: val === 1 ? '通过' : '重审',
    contentStatus: item.status
  }
  const str = val === 1 ? '通过' : '重审'

  ElMessageBox.confirm(`确定${str}吗？`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      
      request
        .post('/admin/examine/ispass', formPass)
        .then(res => {
          ElMessage.success('操作成功')
          emit('refresh')
        })
        .catch((err) => {
          if (err.response) {
            console.error(err.message)
            // ElMessage.error('出错了', err.message)
            ElNotification({
              title: 'Error',
              message: err.message,
              type: 'error'
            })
          } else {
            ElNotification({
              title: 'Error',
              message: '网络错误',
              type: 'error'
            })
          }
        })
    })
    .catch(() => {
      console.log('取消了')
    })
}

const handleSelectionChange = (val) => {
  console.log('测试', val)
}
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
</style>
